<template>
  <view class="page">
    <!-- 标题+店铺详情 start -->
    <headTop @searchHomeChange="searchHomeChange"></headTop>
    <!-- 标题+店铺详情 end -->
    <!-- 轮播图 start -->
    <view class="home-swiper" v-if="banners.length > 0"><fuSwiper :lists="banners"></fuSwiper></view>
    <!-- 轮播图 end -->
    <!-- 热销榜Top start -->
    <view class="hot-sale-wrap" v-if="hot_top_list.length > 0">
      <view class="hot-sale-tips flex justify-center align-center">
        <image src="https://localelife.chunchuangkeji.cn/h5img/images/shop-circle-left.png"></image>
        <view class="text-lg text-bold margin-left-sm margin-right-sm">{{i18n['热销TOP榜']}}</view>
        <image src="https://localelife.chunchuangkeji.cn/h5img/images/shop-circle-right.png"></image>
      </view>
      <block v-for="(item, index) in hot_top_list" :key="index">
		  <view class="margin-bottom-24">
			  <fu-block :info="item" :borderRadius="16"></fu-block>
		  </view>
      </block>
    </view>
    <!-- 热销榜Top end -->
    <!-- 店铺商品 start -->
    <screen @change="screenChange" :show="false"></screen>
    <view class="screen-wrap flex justify-start flex-wrap">
      <block v-for="(item, index) in goodsList" :key="index">
        <view class="screen-item"><fu-block :info="item" padding="32rpx 0" borderBottom></fu-block></view>
      </block>
    </view>
    <!-- 店铺商品 end -->
    <!-- 无数据 start -->
    <fu-empty-ui v-if="isData"></fu-empty-ui>
    <!-- 无数据 end -->
    <!-- 没有更多数据 start -->
    <uni-load-more v-if="goodsList.length > 0" :status="status"></uni-load-more>
    <!-- 没有更多数据 end -->

    <!-- 返回顶部 start -->
    <backTop v-if="isShowTop"></backTop>
    <!-- 返回顶部 end -->
  </view>
</template>

<script>
// 引入标题+店铺详情
import headTop from '../../components/head/head.vue';
// 引入轮播图
import fuSwiper from '../../components/fu-swiper/fu-swiper.vue';
// 引入筛选组件
import screen from '../../components/fu-screen/fu-screen.vue';
// 引入商品信息块组件
import FuBlock from '../../components/fu-block/fu-block.vue';
// 引入返回顶部组件
import backTop from '../../components/fu-top/fu-top.vue';
export default {
  components: {
    headTop,
    fuSwiper,
    screen,
    FuBlock,
    backTop
  },
  data() {
    return {
      // 店铺信息
      shopInfo: {},
      // 轮播图信息
      banners: [],
      // 热销Top榜
      hot_top_list: [],
      // 商品数据
      goodsList: [],
      sort: 1, //1综合排序，2销量，3价格
      order: 'asc', //升序 asc 或者 倒序 desc 默认升序
      keyword: '', //搜索关键字
      is_new: 0, //0不搜新品 1搜新品
      page: 1, //当前页数
      list_rows: 10, //每页条数
      status: 'more', //数据加载状态
      isData: false, //无数据状态
      isShowTop: false //是否显示置顶按钮
    };
  },
  mounted() {
    this.getGoodsGetGoodsList();
    this.getAds();
    this.get_shop_centre();
  },
  methods: {
    /**
     * @description 子传父
     * @param {String} data == component
     */
    searchHomeChange(data) {
      this.$emit('barChange', data);
    },
    /**
     * @description 筛选组件返回数据
     * @param {Object} data 组件返回参数
     */
    screenChange(data) {
      console.log(data);
      this.sort = data.sort;
      this.order = data.order;
      this.is_new = data.is_new;
      this.page = 1;
      this.status = 'more';
      this.getGoodsGetGoodsList();
    },
    /**
     * @event
     * @description 跳转到商品详情
     * @param {Object} item - 商品信息
     */
    navToDetail(item) {
      this.$urouter.navigateTo({
        url: '/pages/goods/goodsdetail/goods-detail/index',
        params: {
          sku_id: item.sku_id || 0,
          goods_id: item.id
        }
      });
    },
    /**
     * @description 获取商品数据
     */
    getGoodsGetGoodsList() {
      this.isData = false;
      if (this.status != 'more') return;
      this.status = 'loading';
      this.$api
        .post(global.apiUrls.getGoodsGetGoodsList, {
          partner_id: this.$store.state.partner_id, //店铺id,
          sort: this.sort, //1综合排序，2销量，3价格
          order: this.order, //升序 asc 或者 倒序 desc 默认升序
          goods_type: this.is_new, //0不搜新品 1搜新品
          page: this.page,
          list_rows: this.list_rows
        })
        .then(res => {
          console.log('商品信息', res);
          if (res.data.code == 1) {
            if (this.page == 1) this.goodsList = [];
            this.goodsList.push(...res.data.data.data);
            let num = this.list_rows;
            if (this.goodsList.length < res.data.data.total) {
              this.status = 'more';
              this.page++;
            } else {
              this.status = 'noMore';
            }
            if (this.goodsList.length == 0) {
              this.isData = true;
            }
            uni.stopPullDownRefresh();
          } else {
            this.isData = true;
            this.status = 'more';
            uni.stopPullDownRefresh();
          }
        })
        .catch(err => {
          this.isData = true;
          this.status = 'more';
          uni.stopPullDownRefresh();
          console.log(err);
        });
      this.$forceUpdate();
    },
    /**
     * @description 刷新
     */
    refresh() {
      // this.getAds();
      // this.get_shop_centre();
      // 每次刷新时重置已选择的筛选
      if (this.$refs.screen) {
        this.$refs.screen.reset();
        this.sort = 1; //1综合 2销量 3价格
        this.order = 'asc'; //升序 asc 或者 倒序 desc 默认升序
        this.is_new = 0; //是否是新品
      }
      this.page = 1;
      this.status = 'more';
      this.getGoodsGetGoodsList();
    },
    /**
     * @description 滚动设置
     */
    scrollShow(type) {
      this.isShowTop = type;
    },
    /**
     * @description 获取热销榜
     */
    get_shop_centre() {
      this.$api
        .post(global.apiUrls.get_shop_centre, {
          partner_id: this.$store.state.partner_id //店铺id,
        })
        .then(res => {
          console.log('获取热销榜', res);
          if (res.data.code == 1) {
            this.hot_top_list = res.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    /**
     * @description 获取banner
     */
    getAds() {
      this.$api
        .post(global.apiUrls.getAds, {
          typeid: 16, //13指店铺轮播
          partner_id: this.$store.state.partner_id //店铺id,
        })
        .then(res => {
          console.log('获取轮播图', res);
          if (res.data.code == 1) {
            this.banners = res.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped lang="scss">
  .text-cut-2{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
.page {
  padding-bottom: 100rpx;
  padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}
// 轮播图 start
.home-swiper {
  margin: 24rpx 32rpx 0;
  background:#FFFFFF;
  border-radius: 16rpx;
  overflow: hidden;

}
// 轮播图 end
// 热销 start
.hot-sale-wrap {
  padding: 0rpx 24rpx 24rpx;
  box-sizing: border-box;
  .hot-sale-tips {
    padding: 32rpx 0rpx;
    box-sizing: border-box;
    image {
      width: 32rpx;
      height: 10rpx;
    }
  }
  .hot-sale-item {
    height: 220rpx;
    background: #ffffff;
    opacity: 1;
    border-radius: 16rpx;
    padding: 24rpx;
    box-sizing: border-box;
    .hot-sale-img {
      width: 172rpx;
      height: 172rpx;
      overflow: hidden;
      margin-right: 48rpx;
      border-radius: 8rpx;
      background:#f8f8f8;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .hot-sale-info {
      width: calc(100% - 220rpx);
      .hot-sale-title {
        // height: 74rpx;
        .item-tips {
          flex: 1 0 auto;
          padding: 4rpx 6rpx;
          text-align: center;
          background: rgba(255, 100, 100, 0.1);
          border-radius: 4rpx;
          color: #ff6464;
          margin-right: 8rpx;
        }
      }
      .hot-sale-num {
        padding: 8rpx 0;
      }
      .hot-sale-price {
        color: #FB2A25;
        .price-through {
          margin-left: 16rpx;
          color: #bfbfbf;
        }
      }
    }
  }
  .hot-sale-item+.hot-sale-item {
    margin-top: 20rpx;
  }
}

// 热销 end
// 商品 start
.screen-wrap {
  box-sizing: border-box;
  .screen-item {
    width: 100%;
	background-color: #fff;
	padding: 0 32rpx;
	box-sizing: border-box;
  }
}
// 商品 end
</style>
